{% extends "geonode_base.html" %}
{% load i18n %}
{% load bootstrap_tags %}
{% load base_tags %}
{% load guardian_tags %}
{% load floppyforms %}
{% load static from staticfiles %}

{% block head %}
  <script src="{% static "lib/js/jquery.js" %}"></script>
  <script src="{% static "lib/js/moment-with-locales.js" %}"></script>
  <script src="{% static "lib/js/bootstrap-datetimepicker.js" %}"></script>
  <link rel="stylesheet" href="{% static "lib/css/bootstrap-datetimepicker.css" %}" />
  <script type="text/javascript" src={% static "tinymce/tinymce.min.js" %}></script>
  <script type="text/javascript" src={% static "django_tinymce/init_tinymce.js" %}></script>
  <link rel="stylesheet" type="text/css" id="mce-u0" href= {% static "tinymce/skins/ui/oxide/skin.min.css" %}>

    <style>
        .xxs-font-size{
            font-size: 10px;
        }
        textarea{
            width:100%;
        }
        select{
            width:100%;
        }
        .test-class{
            background-color: red;
        }
        table{
            table-layout:fixed;
            width: 100%;
        }
        td > input{
            width: 100%;
        }
        h2.page-title {
          max-width: calc(100% - 300px);
        }
        .input-empty{
            border-color: red;
            border-style: double;
        }

        input[type="text"] {
            width: 100%;
            left: 0;
            right: 0;
        }
        .fancy-checkbox input[type="radio"],
        .fancy-checkbox input[type="checkbox"],
        .fancy-checkbox .checked {
            display: none;
        }

        .fancy-checkbox input[type="radio"]:checked ~ .checked,
        .fancy-checkbox input[type="checkbox"]:checked ~ .checked {
            display: inline-block;
            color:red;
        }

        .fancy-checkbox input[type="radio"]:checked ~ .unchecked,
        .fancy-checkbox input[type="checkbox"]:checked ~ .unchecked {
            display: none;
        }

        .tokenfield,
        #id_resource-title {
            width: 100% !important;
        }
        #edit-metadata .tab-pane > .panel-group >.panel.panel-default, #settings .panel-group > .panel.panel-default {
          border: none;
        }
        #mdeditor_form > div.tab-content > .tab-pane {
          min-height: 450px;
        }
        #metadata_update {
          min-height: 550px;
        }

        .map-overlay {
            display: none !important;
        }

        #regions_multiselect_container.content {
            position: absolute;
        }
        .fstControls {
            width: 100% !important;
        }

        .fstElement {
            font-size: 0.8em !important;
        }

        .fstResultItem {
            font-size: 1.2em !important;
        }

        .has-error .fstElement {
          border-color: red;
        }
        .treeview {
          max-height: 200px;
          overflow: auto;
          display: block;
          width: 350px;
        }
        .form-actions {
          text-align: right;
        }
    </style>
{{ block.super }}
{% endblock head %}

{% block title %} {{ block.super }} {% endblock %}

{% block body_class %}{% trans "data" %}{% endblock body_class %}

{% block body_outer %}
<div class="modal fade" style="width: 100%; height: 100%;" id="preview_errorDialog" data-backdrop="static" data-keyboard="false" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header alert alert-danger">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h1 class="modal-title">{% trans "Error" %}</h1>
            </div>
            <div class="modal-body">
                <p>{% trans "Error" %}...</p>
            </div>
            <div class="modal-footer">
               <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Close" %}</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" style="width: 100%; height: 100%;" id="preview_pleaseWaitDialog" data-backdrop="static" data-keyboard="false" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1>{% trans "Processing..." %}</h1>
            </div>
            <div class="modal-body">
                <div class="progress">
                  <div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:100%">
                    {% trans "Updating Metadata..." %}
                  </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" style="width: 100%; height: 100%;" id="category_mandatoryDialog" data-backdrop="static" data-keyboard="false" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content panel-warning">
      <div class="modal-header panel-heading">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">{% trans "ERROR" %}</h4>
      </div>
      <div class="modal-body">
        {% trans "Topic Category is mandatory and cannot be empty!" %}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Close" %}</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" style="width: 100%; height: 100%;" id="group_mandatoryDialog" data-backdrop="static" data-keyboard="false" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content panel-warning">
      <div class="modal-header panel-heading">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">{% trans "ERROR" %}</h4>
      </div>
      <div class="modal-body">
        {% trans "Group is mandatory and cannot be empty!" %}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Close" %}</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" style="width: 100%; height: 100%;" id="error_mandatoryDialog" data-backdrop="static" data-keyboard="false" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content panel-warning">
      <div class="modal-header panel-heading">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">{% trans "ERROR" %}</h4>
      </div>
      <div class="modal-body general_errors">
        {% trans "Following items are required:" %}
        <p id="general_errors"></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Close" %}</button>
      </div>
    </div>
  </div>
</div>
  {% block body %}{% endblock body %}
  {% block sidebar %}{% endblock sidebar %}
{% endblock body_outer %}

{% block extra_script %}
{{ block.super }}
    {% include 'metadata_form_js.html' %}

    {% if GEONODE_SECURITY_ENABLED %}
     {% include "_permissions_form_js.html" %}
    {% endif %}

    <script type="text/javascript">
      $('#set_thumbnail').click(function(){
        createMapThumbnail();
      });
    </script>

    <!-- <script type="text/javascript">
        $(document).ready(function() {
            $('#id_resource-regions').multiselect({
                enableClickableOptGroups: true,
                enableCollapsibleOptGroups: true,
                enableFiltering: true,
                includeSelectAllOption: true
            });
        });
    </script> -->

    <!-- <script type="text/javascript">
        $(document).ready(function() {
            $('#id_resource-regions').treeMultiselect({
                startCollapsed: true
            });
        });
    </script> -->

    <!-- Doc & Examples: http://dbrekalo.github.io/fastselect/ -->
    <script type="text/javascript">
        $(document).ready(function() {
            $('#id_resource-regions').fastselect({});
        });
    </script>

{% endblock extra_script %}
